<!--  -->
<template>
    <div class="login-panel">
        <h1 class="title">后台管理系统</h1>
        <el-tabs type="border-card" stretch v-model="currentTab">
            <el-tab-pane>
                <template #label>
                    <span><i class="el-icon-date"></i> 账号登录</span>
                </template>
<login-account ref="accountRef"></login-account>
</el-tab-pane>
<el-tab-pane>
    <template #label>
                    <span><i class="el-icon-date"></i> 手机登录</span>
                </template>
    <login-phone></login-phone>
</el-tab-pane>
</el-tabs>
<div class="account-control">
    <el-checkbox v-model="isKeepPassword">记住密码</el-checkbox>
    <el-link type="primary">忘记密码</el-link>
</div>
<el-button type="primary" class="login-btn" @click="handleLoginClick">立即登录</el-button>
</div>
</template>

<script lang="ts">
    import {
        defineComponent,
        ref
    } from "vue";
    import LoginPhone from './login-phone.vue'
    import LoginAccount from './login-account.vue'

    export default defineComponent({
        name: "Login",
        components: {
            LoginPhone,
            LoginAccount
        },
        setup() {
            const isKeepPassword = ref(true)
            const accountRef = ref < InstanceType < typeof LoginAccount >> ()
            const phoneRef = ref < InstanceType < typeof LoginPhone >> ()
            const currentTab = ref('account')

            const handleLoginClick = () => {
                if (currentTab.value === 'account') {
                    // accountRef.value.loginAction(isKeepPassword.value)
                } else {
                    console.log('phoneRef调用loginAction')
                }
            }
            return {
                isKeepPassword,
                accountRef,
                phoneRef,
                currentTab,
                handleLoginClick
            }

        }
    });
</script>
<style lang="less">
    .login-panel {
        margin-bottom: 150px;
        width: 320px;
        .title {
            text-align: center;
        }
        .account-control {
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
        }
        .login-btn {
            width: 100%;
            margin-top: 10px;
        }
    }
</style>